<template>
  <div class="header_container">
    <div class="zhtop">
      <!-- 左侧 -->
      <div class="zhtop-left">
        <div class="menu-list-item" v-for="(item, index) in leftList"  :key="index" @click="goPath(item)">
          <div class="zhtop-kuai">
            <icon :name="item.icon" scale=".8"></icon>
            <span>{{ item.name }}</span>
          </div>
          <div class="zhtop-cont-list">
            <div class="zhtop-cdlist" v-for="(e, i) in item.list" :key="i">
              <h1 @click="goPath(e)">{{ e.name }}</h1>
            </div>
          </div>
        </div>
      </div>
      <!-- 中间 -->
      <div class="zhtop-center">水峪选煤厂集成监控平台</div>
      <!-- 右侧 -->
      <div class="zhtop-right">
        <div class="menu-list-item" v-for="(item, index) in rightList" :key="index" @click="goPath(item)">
          <div class="zhtop-kuai">
            <icon :name="item.icon" scale=".8"></icon>
            <span>{{ item.name }}</span>
          </div>
          <div class="zhtop-cont-list">
            <div class="zhtop-cdlist" v-for="(e, i) in item.list" :key="i">
              <h1 @click="goPath(e)">{{ e.name }}</h1>
            </div>
          </div>
        </div>
      </div>
    </div>

	<!-- 公司图标 -->
	<div class="gstb">
        <img src="../../assets/img/gstb-t.png" alt="">
    </div>
  </div>
</template>
<script>
import {leftList,rightList} from './headerData'
export default {
  name: "headerNavbar",
  data() {
    return {
        leftList,
        rightList
    };
  },
  methods: {
    //跳转
    goPath(item) {
      if(item.path){
        this.$router.push(item.path);
      }
    },
  },
};
</script>
<style lang="scss">
.header_container {
  width: 100%;
  height: 100%; 
  background-color: #fff;
  background: url(../../assets/img/top-bg.png) no-repeat top center;
  background-size: 100%;
  text-align: center;
}
.zhtop {
  width: 100%;
  height: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.zhtop-left,.zhtop-right {
  width: 35%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -0.3rem;
  .zhtop-kuai {
    width: 90px;
    cursor: pointer;
    padding: 8px 0;
    color:#fff;
  }
}
.zhtop-center {
  width: 28%;
  color: #dadde1;
  font-size: 0.45rem;
  text-align: center;
  margin-top: 0.5rem;
}

.zhtop-left div:last-child,.zhtop-right div:last-child {
  background: none;
}

.menu-list-item {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../../assets/img/icon-tiao.png) no-repeat right center; 
  position: relative;
  z-index: 99;
  height: auto;
  .zhtop-kuai {
    width: 100%;
    cursor: pointer;
    padding: 10px 0;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    span {
      display: block;
      font-size: 0.2rem;
      color: #fff;
      padding-top: 2px;
      margin-left: 5px;
    }
  }
  .zhtop-cont-list {
    opacity: 0;
    color: #fff;
    transition: 0.3s;
    position: absolute;
    top: 0.49rem;
    display: none;
    margin-left: 15px;
    background: #043d52 !important;
    border-radius: 8px;
    padding: 0 5px;
    //width:1.8rem;
    .zhtop-cdlist {
      padding: 10px;
      color: #fff;
      border-bottom: 1px solid #012539;
      cursor: pointer;
      h1 {
        font-size: 0.17rem;
        font-weight: 500;
      }
    }
  }
  .zhtop-cont-list :last-child{
    border-bottom: none !important;
  }
}
.menu-list-item:hover .zhtop-kuai{
  color: #00def8;
}
.menu-list-item:hover span {
  color: #00def8;
}
.menu-list-item:hover .zhtop-cont-list {
  display: block;
  opacity: 1;
  transition: 3s;
}
.zhtop-cont-list:hover {
  display: block;
  opacity: 1;
  transition: 3s;
}
.zhtop-cdlist:hover h1 {
  color: #00def8;
}

.gstb{
	width:5%;
	position:fixed;
	top: 4.5%;
	left: 1%;
	background:#fff;
	img{
		width: 100%;
	}
}

</style>